<!--
<template>
  <div id="echart-pie" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  methods: {
    initChart(pieData) {
      var chartDom = document.getElementById("echart-pie");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "借书类型分析统计图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "借书类型分析统计图",
            type: "pie",
            radius: "50%",
            data:pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>-->
<template>
  <div id="echart-pie" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  methods: {
    initChart(pieData) {
      var chartDom = document.getElementById("echart-pie");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "借书类型分析统计图",
          subtext: "数据统计", // 副标题
          left: "center",
          top: "5%",
          textStyle: {
            fontSize: 18,
            fontWeight: 'bold',
            color: '#333', // 标题文字颜色
          },
          subtextStyle: {
            fontSize: 14,
            color: '#666', // 副标题文字颜色
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0, 0, 0, 0.7)", // 更加清晰的背景色
          textStyle: {
            color: "#fff", // 提示框文本颜色
            fontSize: 14,
          },
          borderColor: "#ccc", // 提示框边框颜色
          borderWidth: 1,
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: "middle",
          textStyle: {
            fontSize: 14,
            color: "#333", // 图例文本颜色
          },
          itemWidth: 12, // 图例的宽度
          itemHeight: 12, // 图例的高度
        },
        series: [
          {
            name: "借书类型分析统计图",
            type: "pie",
            radius: ["40%", "70%"], // 设置内半径和外半径，形成环形图
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 15,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)", // 高亮时的阴影效果
              },
            },
            label: {
              show: true,
              position: "outside", // 标签显示在外部
              formatter: "{b}: {d}%", // 显示类别和百分比
              color: "#333", // 标签颜色
              fontSize: 14,
            },
            labelLine: {
              show: true, // 显示标签指示线
              length: 15, // 指示线长度
              lineStyle: {
                color: "#ccc", // 指示线颜色
              },
            },
            itemStyle: {
              borderColor: "#fff", // 饼图分块边框颜色
              borderWidth: 2, // 饼图分块边框宽度
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
#echart-pie {
  background-color: #f9f9f9; /* 图表背景颜色 */
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
</style>
